<template>
  <div class="home">
    <!-- 头部区域 -->
    <home-head />
    <div class="warp">
      <van-pull-refresh v-model="isloading" @refresh="onRefresh" success-text="刷新成功">
        <!-- 轮播图区域 -->
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="banner in banners " :key="banner.id">
              <img :src="banner.picUrl" alt />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- company-infon -->
        <conpany-info />
        <!-- 分类宫格导航区域 -->
        <van-grid :border="false" clickable class="grid">
          <van-grid-item v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
            :to="{
                path:'/itemLists',
               query:{
                  cateId:cate.id,
                  name:cate.name
               }
            }" />
        </van-grid>
        <!-- 商品列表区域 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="100"
          @load="onLoad"
        >
          <home-itmes
          @ItemDetail="enterDetail"
          @addCart="addCart"
           :items="items" />
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 尾部导航 -->
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/tabbar'
import HomeHead from './components/HomeHead.vue'
import ConpanyInfo from './components/ConpanyInfo.vue'
import HomeItmes from './components/HomeItems.vue'
import { fetchCates, fetchHomeBanner, fetchHomeList, addCart } from '@api'
import { isLogin } from '@utils'
import { Toast } from 'vant'
export default {
  name: 'home',
  components: {
    Tabbar,
    HomeHead,
    ConpanyInfo,
    HomeItmes
  },
  data () {
    return {
      cates: [], // 用来接收商品分类数据的
      banners: [], // 用来接收轮播图数据的
      items: [], // 用来接收商品列表数据的
      isloading: false, // 下拉刷新时的loading状态 当下拉时会自动变成true
      page: 1, // 定义商品请求那一页
      pageSize: 5, // 一页要多少条
      loading: false, // 是否上拉触底 当触发触底事件是会自动变成true
      finished: false, // 是否上拉到达最后一页 当到底的时候onload事件就不会触发了
      token: localStorage.getItem('token') // 获取token
    }
  },
  created () {
    // 调用请求数据函数
    this.fetchCates()
    this.fetchBanner()
  },
  methods: {
    // 添加购物车
    addCart (id) {
      // 先做判断是否登录 登录就加入购物车 没有登录就去登录页
      if (isLogin()) {
        // 已登录 可以添加到购物车
        addCart({
        // 后端接受的参数 传入过去
          goodsId: id,
          number: 1,
          token: this.token
        }).then(res => {
          if (res.data.code === 0) {
            // 添加成功后从新给state里的数据赋值
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              todal: res.data.data.price
            })
            Toast.success({
              message: '加入成功',
              duration: 1000
            })
          }
        })
      } else {
        // 没有的登录 给一个提示 然后跳转到登录页
        Toast.fail({
          message: '暂无登录',
          duration: 1000,
          onClose: () => {
            // 这里跳转到登录页面
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }

            })
          }
        })
      }
    },
    // 接受子组件传递过来的id 并跳转到详情页 在讲id传递过去
    enterDetail (id) {
      this.$router.push(`/itemDetail/${id}`)
    },
    // 上拉触底触发的事件
    onLoad () {
      // 会打开页面就会触发一次 所以可以在这里请求初始的数据
      this.fetchList()
      // 请求下一页数据
      this.page++
    },
    // 用来监听用户下拉刷新的动作的函数
    onRefresh () {
      // 将上拉加载的请求page页数回到1
      this.page = 1
      // 将数据清空 从新加载
      this.items = []
      this.fetchList()
      this.page++
      // 当到达底部时finised要在变为false 不然第一页就会直接到底了
      this.finished = false
    },
    // 调用请求分类数据
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.cates.pop()
        }
      })
    },
    // 调用请求轮播数据
    fetchBanner () {
      fetchHomeBanner({}).then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 调用请求推荐商品数据
    fetchList () {
      fetchHomeList({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        // 请求完成后结束下拉刷新的loading状态让他变为false
        this.isloading = false
        // 要在数据成功获取后 将触底状态变成false 不然没法请求下一页数据
        this.loading = false
        // 判断数据到最后一页了，到最后一页finished为true 当到底的时候onload事件就不会触发了
        if (res.data.code === 700) {
          this.finished = true
        }
        if (res.data.code === 0) {
          // 这里合并数组 将上一次请求的数据 和这一次请求的数据放在一起
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home{
   background-color: #F3F5F7;
}
.warp {
  box-sizing: border-box;
  padding: 44px 12px 50px 12px;
  .my-swipe {
    border-radius: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .grid {
    overflow: hidden;
    border-radius: 10px;
  }
}
</style>
